<template>
  <div>

    <el-table
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column
        :label="$t('#')"
        prop="index"
        align="center"
        width="50"
      />
      <el-table-column prop="dbLength" label="字段备注" width="240px">
        <template slot-scope="scope">
          <el-form-item>
            <el-input
              v-model="scope.row.dbFieldTxt"
              disabled
            /> </el-form-item>
        </template>
      </el-table-column>
      <el-table-column prop="dbFieldName" label="字段名称" width="240px">
        <template slot-scope="scope">
          <el-form-item>
            <el-input
              v-model="scope.row.dbFieldName"
              disabled
            /> </el-form-item></template>
      </el-table-column>
      <el-table-column prop="dbPointLength" label="验证规则" width="240px">
        <template slot-scope="scope">
          <el-form-item>
            <el-select
              v-model="scope.row.fieldValidType"
              placeholder="请选择"
              :disabled="scope.row.dbFieldName == 'id'"
            >
              <el-option
                v-for="item in verifOption"
                :key="item.value"
                :label="item.title"
                :value="item.value"
              />
            </el-select> </el-form-item></template>
      </el-table-column>
      <el-table-column label="校验必填">
        <template slot-scope="scope">
          <el-checkbox
            v-model="scope.row.fieldMustInput"
            :checked="scope.row.fieldMustInput"
            :disabled="scope.row.dbFieldName == 'id'"
          />
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
import { mapState } from 'vuex'
const verifOption = [
              { title: '空', value: '' },
              { title: '唯一校验', value: 'only' }, // 要查数据库
              { title: '6到16位任意字符', value: '*6-16' },
              { title: '身份证', value: 'id' },
              { title: '邮箱', value: 'e' },
              { title: '手机号码', value: 'm' },
              { title: '邮政编码', value: 'p' },
              { title: '字母', value: 's' },
              { title: '数字', value: 'n' },
              { title: '正整数', value: 'z' },
              { title: '6到18位字符串', value: 's6-18' }
              ]
export default {
   data() {
     return {
          i: 1,
          btnDis: true,
          multipleTable: [],
          tableData: [],
          verifOption: verifOption,
          options: [
             { title: 'String', value: 'string' },
              { title: 'Integer', value: 'int' },
              { title: 'Double', value: 'double' },
              { title: 'Date', value: 'Date' },
              { title: 'BigDecimal', value: 'BigDecimal' },
              { title: 'Text', value: 'Text' },
              { title: 'Blob', value: 'Blob' }
          ]

     }
   },
  computed: {
    ...mapState('dbAbout', ['dbPropertyList', 'indexMemory'])

  },
   watch: {
    indexMemory: {
      handler() {
          const { newIndex, oldIndex } = this.indexMemory
          const currRow = this.tableData.splice(oldIndex, 1)[0]
          this.tableData.splice(newIndex, 0, currRow)
          let i = 1
          this.tableData.forEach(e => { e.index = i++ })
        }
     },
    dbPropertyList: {
     handler() {
     this.wrapperData()
    },
    deep: true
    }
  },
   created() {
       this.wrapperData()
   },
   methods: {
   // 封装成这个表单需要的数据
     wrapperData() {
      this.tableData = []
      this.dbPropertyList.forEach(e => {
        const obj = {
           'index': (e.index),
           'dbFieldName': e.dbFieldName,
           'dbFieldTxt': e.dbFieldTxt,
           'fieldValidType': e.fieldValidType || '',
           'fieldMustInput': e.dbFieldName === 'id' ? false : e.isReadOnly === undefined ? false : !(e.fieldMustInput === 0)
        }
          this.tableData.push(obj)
        })
     }
  }
}
</script>

<style scoped>
.buttons {
  margin-bottom: 10px;
}
/* 修改行的最小高度 */
.dataForm .el-row .el-form-item {
  min-height: 0px;
}
</style>
